<template>
    <h2>会员等级权益列表</h2>
    <input type="button" value="批量删除" class="btn btn-danger" @click="BatchDelete"/>
    <table border="1" class="table table-success table-striped-columns">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" v-model="chAll" @change="Xuan" />
                </td>
                <td>等级权益编号</td>
                <td>会员等级</td>
                <td>会员权益</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>
                    <input type="checkbox" :value="item.RankRights" :checked="isCheck" @change="Fan" v-model="newArrys" />
                </td>
                <td>{{item.RankRights}}</td>
                <td>{{item.Rank_Name}}</td>
                <td>{{item.MR_Name}}</td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';

    const info:any=ref([{
        RankRights: 1,
        MR_Id: 1,
        Rank_Name: "黄金会员",
        MR_Name: "免费停车"
    }]);

    //加载所有数据
    const chAll=ref(false);
    const isCheck=ref(false);

    //声明数组 用于保存被选中的数据编号id
    const newArrys=ref([]);

    //全选
    const Xuan=()=>{
        if(chAll.value==true){
            isCheck.value=true;
            //map() 将是指定的数据保存到新数组中
            newArrys.value=info.value.map((item:any)=>{
                return item.RankRights;
            })
        }
        else{
            isCheck.value=false;
            newArrys.value=[];
        }
        console.log(newArrys.value.toString());
    }

    

    // //全选 与 反选
    // const Xuan=()=>{
    //     //获取标题栏中的复选框中是否选中
    //     alert(chAll.value);
    //     if(chAll.value==true){
    //         isCheck.value=true;
    //         newArry.values = info.value.map((item:any)=>{
    //             //map()将指定的数据进行筛选，筛选后会将得到的数据放到新的数组张红
    //             return item.RankRights;
    //         })
    //     }
    //     else{
    //         isCheck.value=false;
    //     }
    //     alert(newArry.values);
    // }

    //反选
    const Fan=()=>{
        if(info.value.length==newArrys.value.length){
            chAll.value=true;
        }
        else{
            chAll.value=false;
        }
        console.log(info.value.length);
        console.log(newArrys.value.length);
    }

    onMounted(()=>{
        Show();
    });

    

    const Show=()=>{
        axios.get("https://localhost:7153/api/Member/ShowMemberRankRights/ShowMemberRankRights")
        .then(res=>{
            console.log(res.data);
            info.value=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    const ids=ref(0);

    //批量删除
    const BatchDelete=()=>{
        // //判断 是否选中数据
        // if(newArrys.value.length==0){
        //     alert('请至少选择一条数据');
        //     return;
        // }
        axios.delete("https://localhost:7153/api/Member/BatchDeleteRankRights/BatchDeleteRankRights",{
            params:{
                ids:newArrys.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                Show();
            }
            else{
                alert('删除失败');
            }
        })
    }

</script>
